<!--
 * @Author: boyyang
 * @Date: 2022-02-19 16:50:02
 * @LastEditTime: 2022-02-25 17:45:53
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\carousel\carouselItem.vue
-->

<template>
    <div class="carousel-item">
        <div class="img">
            <img :src="props.url" />
        </div>
    </div>
</template>

<script lang="ts" setup>
interface ICarouselItemProps {
    url?: string
}

const props = withDefaults(defineProps<ICarouselItemProps>(), {})
</script>

<style scoped lang="scss">
.carousel-item {
    height: 100%;

    .img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            height: 100%;
            // width: 100%;
            box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }
    }
}
</style>